<template>
  <view 
    class="member-card" 
    :class="{ 'member-card--active': member.status === 'active' }"
    @click="handleClick"
  >
    <!-- 会员头像和基本信息 -->
    <view class="member-card__header">
      <view class="member-card__avatar">
        <image 
          v-if="member.avatar" 
          :src="member.avatar" 
          class="member-card__avatar-img"
          mode="aspectFill"
        />
        <view v-else class="member-card__avatar-placeholder">
          <text class="member-card__avatar-text">{{ getAvatarText(member.name) }}</text>
        </view>
        
        <!-- 状态指示器 -->
        <view 
          class="member-card__status-dot" 
          :class="`member-card__status-dot--${member.status}`"
        ></view>
      </view>
      
      <view class="member-card__info">
        <view class="member-card__name">{{ member.name }}</view>
        <view class="member-card__phone">{{ formatPhone(member.phone) }}</view>
        <view class="member-card__join-date">{{ $t('member.joinDate') }}: {{ formatDate(member.joinDate) }}</view>
      </view>
      
      <!-- 操作按钮 -->
      <view class="member-card__actions">
        <view 
          class="member-card__action-btn"
          @click.stop="handleEdit"
        >
          <u-icon name="edit-pen" size="32rpx" color="#666"></u-icon>
        </view>
        <view 
          class="member-card__action-btn"
          @click.stop="handleMore"
        >
          <u-icon name="more-dot-fill" size="32rpx" color="#666"></u-icon>
        </view>
      </view>
    </view>
    
    <!-- 会员详细信息 -->
    <view class="member-card__body">
      <view class="member-card__stats">
        <view class="member-card__stat-item">
          <text class="member-card__stat-value">{{ member.totalSessions || 0 }}</text>
          <text class="member-card__stat-label">{{ $t('member.totalSessions') }}</text>
        </view>
        <view class="member-card__stat-item">
          <text class="member-card__stat-value">{{ member.remainingSessions || 0 }}</text>
          <text class="member-card__stat-label">{{ $t('member.remainingSessions') }}</text>
        </view>
        <view class="member-card__stat-item">
          <text class="member-card__stat-value">{{ getDaysRemaining(member.expiryDate) }}</text>
          <text class="member-card__stat-label">{{ $t('member.daysRemaining') }}</text>
        </view>
      </view>
      
      <!-- 会员套餐信息 -->
      <view v-if="member.package" class="member-card__package">
        <view class="member-card__package-name">{{ member.package.name }}</view>
        <view class="member-card__package-price">¥{{ member.package.price }}</view>
      </view>
    </view>
    
    <!-- 标签 -->
    <view v-if="member.tags && member.tags.length" class="member-card__tags">
      <view 
        v-for="tag in member.tags" 
        :key="tag"
        class="member-card__tag"
      >
        {{ tag }}
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { formatDate, formatPhone } from '@/utils'
import type { Member } from '@/types'

interface Props {
  member: Member
}

const props = defineProps<Props>()

interface Emits {
  click: [member: Member]
  edit: [member: Member]
  more: [member: Member]
}

const emit = defineEmits<Emits>()

// 获取头像文字
const getAvatarText = (name: string): string => {
  if (!name) return ''
  return name.length > 1 ? name.slice(-2) : name
}

// 计算剩余天数
const getDaysRemaining = (expiryDate: string): number => {
  if (!expiryDate) return 0
  const today = new Date()
  const expiry = new Date(expiryDate)
  const diffTime = expiry.getTime() - today.getTime()
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
  return Math.max(0, diffDays)
}

// 事件处理
const handleClick = () => {
  emit('click', props.member)
}

const handleEdit = () => {
  emit('edit', props.member)
}

const handleMore = () => {
  emit('more', props.member)
}
</script>

<style lang="scss" scoped>
.member-card {
  background: var(--card-bg-color, #ffffff);
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.98);
  }
  
  &--active {
    border-left: 8rpx solid var(--success-color, #34C759);
  }
}

.member-card__header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24rpx;
}

.member-card__avatar {
  position: relative;
  width: 96rpx;
  height: 96rpx;
  margin-right: 24rpx;
  flex-shrink: 0;
}

.member-card__avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.member-card__avatar-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color, #007AFF), var(--primary-color-light, #5AC8FA));
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-card__avatar-text {
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 600;
}

.member-card__status-dot {
  position: absolute;
  bottom: 4rpx;
  right: 4rpx;
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  border: 4rpx solid var(--card-bg-color, #ffffff);
  
  &--active {
    background-color: var(--success-color, #34C759);
  }
  
  &--inactive {
    background-color: var(--error-color, #FF3B30);
  }
  
  &--expired {
    background-color: var(--warning-color, #FF9500);
  }
}

.member-card__info {
  flex: 1;
  min-width: 0;
}

.member-card__name {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--text-color, #333333);
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-card__phone {
  font-size: 28rpx;
  color: var(--text-color-secondary, #666666);
  margin-bottom: 8rpx;
}

.member-card__join-date {
  font-size: 24rpx;
  color: var(--text-color-tertiary, #999999);
}

.member-card__actions {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.member-card__action-btn {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background: var(--bg-color-light, #f8f9fa);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  
  &:active {
    background: var(--bg-color, #e9ecef);
    transform: scale(0.9);
  }
}

.member-card__body {
  margin-bottom: 24rpx;
}

.member-card__stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

.member-card__stat-item {
  text-align: center;
  flex: 1;
}

.member-card__stat-value {
  display: block;
  font-size: 36rpx;
  font-weight: 700;
  color: var(--primary-color, #007AFF);
  margin-bottom: 8rpx;
}

.member-card__stat-label {
  font-size: 24rpx;
  color: var(--text-color-tertiary, #999999);
}

.member-card__package {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 24rpx;
  background: var(--bg-color-light, #f8f9fa);
  border-radius: 12rpx;
}

.member-card__package-name {
  font-size: 28rpx;
  color: var(--text-color, #333333);
  font-weight: 500;
}

.member-card__package-price {
  font-size: 32rpx;
  color: var(--primary-color, #007AFF);
  font-weight: 700;
}

.member-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.member-card__tag {
  padding: 8rpx 16rpx;
  background: var(--primary-color-light, #e3f2fd);
  color: var(--primary-color, #007AFF);
  font-size: 24rpx;
  border-radius: 20rpx;
  font-weight: 500;
}

// 暗色主题适配
[data-theme='dark'] {
  .member-card {
    --card-bg-color: #1c1c1e;
    --text-color: #ffffff;
    --text-color-secondary: #8e8e93;
    --text-color-tertiary: #636366;
    --bg-color-light: #2c2c2e;
    --bg-color: #3a3a3c;
    --primary-color-light: rgba(10, 132, 255, 0.2);
  }
}
</style>